<template>
    <div class="box">
        <h2>v-model</h2>
        <div>v-model双向数据绑定: {{ keyword }}</div>
        <input type="text" v-model="keyword">
        <br>
        <br>
        <br>
        <!-- 
            v-model 是双向数据绑定
            在input框上能不能不使用v-model就实现v-model的功能双向数据绑定
            答: 能, 通过绑定:value值展示数据, @input事件实时修改数据,可以实现和 v-model一样的功能
        -->
        <input type="text" :value="keyword" @input="keyword = $event.target.value">

        <br>
        <br>
        <br>
        <!-- 
            组件实现双向数据绑定(父子组件间的数据同步)
            1. 给子组件传递参数,子组件接收这个参数
            2. 子组件修改父组件的数据,通过自定义事件,把参数传给父组件,父组件去修改数据
            3. 当父组件中的数据发生变化的时候,又传给子组件,子组件展示


            组件的数据流向我们已经知道,我们把组件的传值和事件改成 第二个input的形式
        -->
        <CustomInput :value="keyword" @input="keyword = $event"></CustomInput>


        <!-- 
            v-mode在input框上是双向数据绑定
            input上不使用 v-model 也可以 双向数据绑定, 通过 :value 和 @input 来实现双向数据绑定

            我们组件也可以实现,模仿input不加 v-model 来实现了 双向数据绑定(父子数据同步)
                组件通过 :value 和 @input 实现的
                
            我们猜测: 组件想要使用 v-model 和 input使用v-model一样的原理
                只要实现 value 和 @input 应该就能以使用 v-model了
            
            验证之后,证明我们的猜测是对象
            结论: 
                v-model的原理就是两个条件
                1. :value=""
                2. @input=""
                只要组件实现了这两个条件,就可以使用v-model

            场景:
                一般情况下,什么时候会在组件上使用 v-model?
                答: 组件中封装有 input 框的时候,一般使用 v-model
            在哪里见过?
                在 element ui 中见过 el-input 组件上使用的就是 v-model
                el-input组件一定实现了 :value 和 @input
        -->
        <br>
        <br>
        <br>
        <CustomInput v-model="keyword"></CustomInput>
        
    </div>
</template>

<script>
// v-model用于父子组件之间的数据同步
// -----------------------------------------
// v-model 最早使用在表单元素上,双向数据绑定,收集表单数据
// 那么组件能不能使用v-model呢?
// 首先给组件也实现双向数据绑定
// 
import CustomInput from './CustomInput'
export default {
    name: "ModelTest",
    components: { CustomInput },
    data() {
        return {
            keyword: '我爱你'
        }
    }
}
</script>

<style scoped>

</style>